<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="system"></ion-back-button>
    </ion-buttons>
    <ion-title>Active Sessions</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top with-widgets">
  <!-- loading -->
  <ion-item-group *ngIf="loading; else notLoading">
    <div *ngFor="let entry of ['This Session', 'Other Sessions']">
      <ion-item-divider>{{ entry }}</ion-item-divider>
      <ion-item style="padding-bottom: 6px">
        <ion-avatar slot="start" style="margin-right: 30px">
          <ion-skeleton-text
            animated
            style="width: 40px; height: 40px; border-radius: 0"
          ></ion-skeleton-text>
        </ion-avatar>
        <ion-label>
          <ion-skeleton-text
            animated
            style="width: 150px; height: 20px; margin-bottom: 10px"
          ></ion-skeleton-text>
          <ion-skeleton-text
            animated
            style="width: 250px; height: 14px; margin-bottom: 12px"
          ></ion-skeleton-text>
          <ion-skeleton-text animated style="width: 350px"></ion-skeleton-text>
        </ion-label>
        <ion-button *ngIf="entry === 'second'" slot="end" fill="clear">
          <ion-skeleton-text
            animated
            style="width: 60px; border-radius: 0"
          ></ion-skeleton-text>
        </ion-button>
      </ion-item>
    </div>
  </ion-item-group>

  <!-- not loading -->
  <ng-template #notLoading>
    <ion-item-group *ngIf="currentSession">
      <ion-item-divider>Current Session</ion-item-divider>
      <ion-item>
        <ion-icon
          slot="start"
          size="large"
          [name]="getPlatformIcon(currentSession.metadata.platforms)"
        ></ion-icon>
        <ion-label>
          <h1>{{ getPlatformName(currentSession.metadata.platforms) }}</h1>
          <h2>
            Last Active: {{ currentSession['last-active'] | date : 'medium' }}
          </h2>
          <p>{{ currentSession['user-agent'] }}</p>
        </ion-label>
      </ion-item>

      <ion-item-divider>
        Other Sessions
        <ion-button
          *ngIf="otherSessions.length"
          slot="end"
          fill="clear"
          strong
          (click)="presentAlertKillAll()"
        >
          Terminate all
        </ion-button>
      </ion-item-divider>
      <div *ngFor="let session of otherSessions">
        <ion-item>
          <ion-icon
            slot="start"
            size="large"
            [name]="getPlatformIcon(session.metadata.platforms)"
          ></ion-icon>
          <ion-label>
            <h1>{{ getPlatformName(session.metadata.platforms) }}</h1>
            <h2>Last Active: {{ session['last-active'] | date : 'medium' }}</h2>
            <p>{{ session['user-agent'] }}</p>
          </ion-label>
          <ion-button
            slot="end"
            fill="clear"
            color="danger"
            (click)="kill([session.id])"
          >
            Logout
            <ion-icon slot="start" name="log-out-outline"></ion-icon>
          </ion-button>
        </ion-item>
      </div>
      <ion-item *ngIf="!otherSessions.length">
        <ion-label>
          <p>You are not logged in anywhere else</p>
        </ion-label>
      </ion-item>
    </ion-item-group>
  </ng-template>
</ion-content>
